<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<p>商家个人信息</p>
	  </header>
	  
	  <!-- 商家信息部分 -->
	  <div class="business-info">
		<p>{{ business.businessName }}</p>
		<i class="fa fa-edit" @click="toUpdateBusinessName"></i>
	  </div>
  
	  <!-- 修改商家密码部分 -->
	  <ul class="settings-button">
		<li @click="toLogin">
		  <button><i class="fa fa-info"></i>退出登录</button>
		</li>
	  </ul>
  
	  <!-- 底部菜单部分 -->
	  <BusinessFooter />
	</div>
  </template>
  

  <script>
  import { reactive, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import BusinessFooter from '../components/BusinessFooter.vue';
  
  export default {
	name: 'BusinessProfile',
	components: {
	  BusinessFooter
	},
	setup() {
	  const router = useRouter();
	  const business = reactive({ businessName: '' });
  
	  // 获取session存储中的商家信息
	  const loadBusiness = () => {
		const storedBusiness = JSON.parse(sessionStorage.getItem('business'));
		if (storedBusiness) {
		  business.businessName = storedBusiness.businessName;
		}
	  };
  
	  onMounted(() => {
		loadBusiness();
	  });
  
	  const toUpdateBusinessName = () => {

	  };
  
	  const toLogin = () => {
		sessionStorage.removeItem('business');
		router.push('/choselogin');
	  };
  
	  return {
		business,
		toUpdateBusinessName,
		toLogin
	  };
	}
  };
  </script>
  

  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	width: 100%;
	height: 100%;
  }
  
  /****************** header ******************/
  .wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /****************** 商家信息部分 ******************/
  .wrapper .business-info {
	width: 100%;
	box-sizing: border-box;
	padding: 19vw 6vw 6vw;
	display: flex;
	align-items: center;
	border-bottom: solid 1.5px #ddd;
  }
  
  .wrapper .business-info p {
	font-size: 4vw;
	margin-right: 3vw;
	margin-left: 3vw;
  }
  
  .wrapper .business-info .fa-edit {
	font-size: 4vw;
	cursor: pointer;
	user-select: none;
  }
  
  /********* 设置按钮部分 *********/
  .wrapper .settings-button {
	width: 100%;
	box-sizing: border-box;
	padding: 8vw 10vw 0;
  }
  
  .wrapper .settings-button li {
	margin-bottom: 3vw;
  }
  
  .wrapper .settings-button li button {
	width: 100%;
	height: 10vw;
	background-color: white;
	border: none;
	outline: none;
	border-radius: 4vw;
	border: solid 1.5px #ddd;
	font-size: 3.5vw;
	color: dimgray;
	cursor: pointer;
	display: flex;
	align-items: center;
  }
  
  .wrapper .settings-button li button i {
	margin: 0 3vw;
  }
  </style>
  